import React, { useCallback, useEffect, useState, useRef } from "react";

export default function PageCover(props) {
  const { page, currentPage, children } = props;
  const [show, setShow] = useState(false);
  const enable = currentPage === page;
  let transform = null;
  // if (page > currentPage) {
  //   transform = "translateY(50%)";
  // } else if (page < currentPage) {
  //   transform = "translateY(-100%)";
  // }
  transform = `translateY(${page * window.innerHeight}px)`;
  const timer = useRef({ timer: -1 });
  const checkShow = useCallback(() => {
    setShow(enable);
  }, [enable]);
  useEffect(() => {
    clearTimeout(timer.current.timer);
    if (enable) {
      checkShow();
    } else {
      timer.current.timer = setTimeout(() => {
        checkShow();
      }, 500);
    }
  }, [enable, checkShow]);
  return (
    <div
      style={{
        opacity: enable ? 1 : 0,
        zIndex: enable ? 1 : 0,
        transform,
      }}
      className="page-cover"
    >
      {show && children}
    </div>
  );
}
